<script setup>
import { reactive } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

// 数据部分
const info = reactive({
  list: [],
  dialogVisible: false,
  form: {},
  isAdd: true, //false为修改，true为增加
});

//去后端boot程序中请求数据  axios
const load = () => {
  axios.get("http://127.0.0.1:8080/user", {}).then((res) => {
    info.list = res.data;
  });
};
load();

const add = () => {
  info.form={}
  info.isAdd = true;
  info.dialogVisible = true;
};

const handleEdit = (id) => {
  info.isAdd = false;
  //根据传递的id去后端查询最新数据
  axios.get("http://127.0.0.1:8080/user/" + id, {}).then((res) => {
    info.form = res.data;
  });
  info.dialogVisible = true;
};

const handleDelete = (id) => {
  axios.delete("http://127.0.0.1:8080/user/" + id, {}).then((res) => {
    if (res.data === true) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    } else {
      ElMessage.error("操作失败，请联系管理员");
    }
    load()
  });
};
const saveOrUpdate = () => {
  axios({
    url: "http://127.0.0.1:8080/user",
    method: info.isAdd ? "post" : "put",
    data: info.form,
  }).then((res) => {
    if (res.data === true) {
      ElMessage({
        message: "增加操作成功",
        type: "success",
      });
    } else {
      ElMessage.error("操作失败，请联系管理员");
    }
    //关闭当前对话框
    info.dialogVisible = false;
    //清除当前已填写的表单数据
    info.form = {};
    //重新加载最新数据
    load();
  });

  // axios.post("http://127.0.0.1:8080/user", info.form).then((res) => {
  //   if (res.data === true) {
  //     ElMessage({
  //       message: "增加操作成功",
  //       type: "success",
  //     });
  //   } else {
  //     ElMessage.error("操作失败，请联系管理员");
  //   }
  //   //关闭当前对话框
  //   info.dialogVisible = fasle;
  //   //清除当前已填写的表单数据
  //   info.form = {};
  //   //重新加载最新数据
  //   load();
  // });
};
</script>

<template>
  <el-button type="success" plain @click="add()">增加用户</el-button>
  <br /><br />
  <!-- 表格数据 -->
  <el-table :data="info.list" border style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="100" />
    <el-table-column
      align="center"
      prop="username"
      label="用户名"
      width="180"
    />
    <el-table-column align="center" prop="name" label="昵称" width="180" />
    <el-table-column align="center" prop="photo" label="头像" width="180" />
    <el-table-column align="center" prop="state" label="状态" width="180" >
      <template #default="scope">
        <span style="color: green;font-weight: bold;" v-if="scope.row.state===1">启用</span>
        <span style="color: red;font-weight: bold;" v-if="scope.row.state===0">禁用</span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="createTime"
      label="创建时间"
      width="200"
    />
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">
          修改
        </el-button>

        <el-popconfirm title="你确定删除吗？" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button
              size="small"
              type="danger"
            >
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!-- 弹窗 -->
  <el-dialog
    v-model="info.dialogVisible"
    :title="info.isAdd ? '增加用户':'修改用户'"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      :model="info.form"
      label-width="auto"
      style="max-width: 80%; padding-left: 60px"
    >
      <el-form-item label="用户名">
        <el-input v-model="info.form.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="info.form.password" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="info.form.name" />
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="info.form.photo" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="info.form.state">
          <el-radio :value="1">可用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="info.form.createTime"
          type="datetime"
          placeholder="请选择时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate()"> 保存信息 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>